
<template>
  <div class="login-container" >
    <img src="./images/logo-201305-b.png" alt="" class="o1">
    <img src="./images/l-icon.png" alt="" class="o2">
  
    <!--登录面板内容部分-->
<div class="yinsi">
        <img src="./images/icon-tips.png" alt="">
        <span>依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版</span>
        <a href="javascript:;">《京东隐私政策》</a>
        <span>已上线，将更有利于保护您的个人隐私。</span>
    </div>
  <div class="login-inner">
      <!--面板头部-->
      <div class="login-header">
        <div class="login-logo">
      
        </div> 
        
        <!--面板标题-->
        <div class="login-header-title">
          <a href="javascript:;" :class="{current: loginMode}" @click="dealLoginMode(true)" class="verifylogin">验证码登录</a>
          <a href="javascript:;" :class="{current: !loginMode}" @click="dealLoginMode(false)" class="passwordlogin">密码登录</a>
        </div>
      </div>
      <!--面板表单部分-->
      <div class="login-content">
        <form>
          <!--手机验证码登录部分-->
          <div :class="{current: !loginMode}">
            <section class="login-message">
              <input type="tel" maxlength="11" placeholder="手机号" v-model="phone">
              <button
                v-if="!countDown"
                class="get-verification"
                :class="{phone_right: phoneRight}"
                @click.prevent="getVerifyCode()"
              >
                获取验证码
              </button>
              <button
                v-else
                disabled="disabled"
                class="get-verification">
                已发送({{countDown}}s)
              </button>
            </section>
            <section class="login-verification">
              <input type="tel" maxlength="8" placeholder="验证码" v-model="code">
            </section>
            <section class="login-hint">
              温馨提示：未注册帐号的手机号，登录时将自动注册，且代表已同意
              <a href="javascript:;">服务协议与隐私政策</a>
            </section>
          </div>
          <!--账号登录部分-->
          <div :class="{current: loginMode}">
            <section>
              <section class="login-message">
                <input type="text" maxlength="11" placeholder="账号" v-model="user_name">
              </section>
              <section class="login-verification">
                <input type="password" maxlength="18" placeholder="密码" v-if="pwdMode" v-model="pwd">
                <input type="text" maxlength="18" placeholder="密码" v-else v-model="pwd">
                <div class="switch-show">
                  <img @click.prevent="dealPwdMode(false)" :class="{on: pwdMode}" src="./images/hide_pwd.png" alt=""
                       width="20">
                  <img @click.prevent="dealPwdMode(true)" :class="{on: !pwdMode}" src="./images/show_pwd.png" alt=""
                       width="20">
                </div>
              </section>
              <section class="login-message">
                <input type="text" maxlength="11" placeholder="验证码" v-model="captcha">
                <img
                  ref="captcha"
                  class="get-verification"
                  src="http://localhost:3000/api/captcha"
                  alt="captcha"
                  @click.prevent="getCaptcha()"
                >
              </section>
              <section class="login-hint">
                温馨提示：未注册帐号的用户账号，登录时将自动注册，且代表已同意
                <a href="javascript:;">服务协议与隐私政策</a>
              </section>
            </section>
          </div>
          <button class="login-submit" @click.prevent="login()">登录</button>
        </form>
        <button class="login-back" @click="$router.back()">返回</button>
      </div>
    </div>
    <footer class="jd_car_foot">
        <div class="jd_foot">
            <ul class="kefu">
                <li>
                    <a href="">| 关于我们</a>
                  
                </li>
                <li>
                    <a href=" ">| 联系我们</a>
                  
                </li>
                <li>
                    <a href="">| 人才招聘</a>
                  
                </li>
                <li>
                    <a href=" ">| 商家入驻</a>
                  
                </li>
                <li>
                    <a href=" ">| 广告服务</a>
                  
                </li>
                <li>
                    <a href=" ">| 手机京东</a>
                  
                </li>
                <li>
                    <a href=" ">| 友情链接</a>
                  
                </li>
                <li>
                    <a href=" ">| 销售联盟</a>
                  
                </li>
                <li>
                    <a href=" ">| 京东社区</a>
                  
                </li>
                <li>
                    <a href=" ">| 京东公益</a>
                  
                </li>
                <li>
                    <a href=" ">| English Site</a>
                </li>

            </ul>
            <div class="jd_msg ">
                <div class="row ">
                    <a href=" ">Copyright © 2004 - 2021 京东JD.com 版权所有</a>
                </div>
            </div>
        </div>
    </footer>
    <!-- 底部模块 end -->
  </div>
</template>

<script>
  import {getPhoneCode, phoneCodeLogin, pwdLogin} from './../../api/index';
  import { MessageBox } from 'element-ui';
  import {mapActions} from 'vuex'

  export default {
    name: "Login",
    data() {
      return {
        loginMode: true, // 登录方式, true 验证码登录 false 账号登录
        phone: '', // 手机号码
        countDown: 0, // 倒计时
        pwdMode: true, // 密码的显示方式 true 密文 false 明文
        pwd: '', // 密码
        code: '', // 验证码
        userInfo: {}, // 用户的信息
        user_name: '', // 用户名
        captcha: '',  // 图形验证码
      }
    },
    computed: {
      // 验证手机号是否合理
      phoneRight() {
        return /^[1][3,4,5,7,8][0-9]{9}$/.test(this.phone)
      }
    },
    methods: {
      ...mapActions(['syncUserInfo']),
      // 1. 登录的模式
      dealLoginMode(flag) {
        this.loginMode = flag;
      },
      // 2. 获取短信验证码
      async getVerifyCode() {
        // 2.1 开启倒计时
        if (this.phoneRight) {
          this.countDown = 60;
          this.intervalId = setInterval(() => {
            this.countDown--;
            // 判断
            if (this.countDown === 0) {
              clearInterval(this.intervalId);
            }
          }, 1000);
        }

        // 2.2 获取短信验证码
        let result = await getPhoneCode(this.phone);
        console.log(result);

        // 2.3 获取验证码失败
        if (result.err_code === 0) {
          // 提示信息
		      MessageBox({
              type: 'info',
              message: result.message,
			        showClose: true,
          });

          // 其他处理
          /*
          clearInterval(this.intervalId);
          this.countDown = 0;
          */
        }else if(result.success_code === 200){
			    MessageBox({
              type: 'info',
              message: `验证码为:${result.message}, 短信功能暂未开通,十分抱歉对您产生的不便`,
			        showClose: true,
          });
		    }
      },
      // 3. 密码的显示方式
      dealPwdMode(flag) {
        this.pwdMode = flag;
      },
      // 4. 获取图形验证码
      getCaptcha() {
        this.$refs.captcha.src = 'http://localhost:3000/api/captcha?time=' + new Date();
      },
      // 5. 登录
      async login() {
        // 5.1 登录模式
        if (this.loginMode) { // 验证码登录
          // 5.2 前台校验
          if (!this.phone) {
		        MessageBox({
              type: 'info',
              message: "请输入手机号码!",
			        showClose: true,
            });
            return;
          } else if (!this.phoneRight) {
		        MessageBox({
              type: 'info',
              message: "请输入正确手机号码!",
			        showClose: true,
            });
            return;
          }

          if (!this.code) {
		      	MessageBox({
              type: 'info',
              message: "请输入验证码!",
			        showClose: true,
            });
            return;
          } else if (!(/^\d{6}$/gi.test(this.code))) {
		         MessageBox({
              type: 'info',
              message: "请输入正确的验证码!",
			        showClose: true,
            });
            return;
          }
          // 5.3 手机验证码登录
          const result = await phoneCodeLogin(this.phone, this.code);
          if (result.success_code === 200) {
            this.userInfo = result.message;
			      this.phone = ''; // 手机号码
            this.countDown = 0; // 倒计时
			      clearInterval(this.intervalId);
            this.code = ''; // 验证码
			      this.pwd = ''; // 密码
            this.user_name = ''; // 用户名
            this.captcha = '';  // 图形验证码
          } else {
            this.userInfo = {
              message: '登录失败, 手机号或验证码不正确!'
            };
          }
        } else { // 账号和密码登录
          // 5.4 前端校验
          if (!this.user_name) {
		        MessageBox({
              type: 'info',
              message: "请输入账号!",
			        showClose: true,
            });
            return;
          } else if (!this.pwd) {
		        MessageBox({
              type: 'info',
              message: "请输入密码!",
			        showClose: true,
            });
            return;
          }else if (!this.captcha) {
		        MessageBox({
              type: 'info',
              message: "请输入验证码!",
			        showClose: true,
            });
            return;
          }
          // 5.5 用户名和密码的登录
          const result = await pwdLogin(this.user_name, this.pwd, this.captcha);
          if (result.success_code === 200) {
            this.userInfo = result.message;
			      this.phone = ''; // 手机号码
            this.countDown = 0; // 倒计时
			      clearInterval(this.intervalId);
            this.code = ''; // 验证码
			      this.pwd = ''; // 密码
            this.user_name = ''; // 账号
            this.captcha = '';  // 图形验证码
          } else {
            MessageBox({
              type: 'info',
              message: '登录失败, 账号或密码或验证码不正确!',
			        showClose: true,
            });
          }
        }

        // 6. 后续处理
        if (!this.userInfo.id) { // 失败
		        MessageBox({
              type: 'info',
              message: this.userInfo.message,
			        showClose: true,
            });
        } else { // 成功
          // 6.1 同步用户数据
          this.syncUserInfo(this.userInfo);
          // 6.2 回到主界面
          MessageBox({
            type: 'success',
            message: '登录成功!',
			      showClose: true,
          });
          this.$router.back();
          window.localStorage.setItem("userInfo",JSON.stringify(this.userInfo));
          window.localStorage.removeItem("adminInfo");
        }
      }
    }
  }
</script>
 <style>
 .login-container{
   margin-top: 120px;
   width :100%;
   height: 475px;
   background-image: url(./images/background.png);
   background-size: 100% ;
  
   }
  .o1 {
     margin-top: -205px;
     margin-left: 92px;
   }
   .o2 {
     margin-top: -178px;
     margin-left: 20px;
   }
   .yinsi {
     font-size: 14px;
     margin-top: -60px;
  height: 20px;
  text-align: center;
  line-height:15px;
  background-color: #fff8f0;
}
.yinsi img {
   vertical-align: middle; 
}
.yinsi span {
 
  color: #999;
}
.yinsi a {
  color: #333;
}
.yinsi a:hover {
  text-decoration: underline;
}
    
.login-inner{
  padding-top: 15px;
width :25%;
margin-left: 800px;

}
 .login-header  .login-logo{
    font-size :20px;
    font-weight :bold;
    color: mediumpurple;
    text-align :center;
  } 
  .login-header-title{
   padding-top: 40px;
    padding-bottom: 10px;
    text-align: center;
          }
    
    .login-header-title  a{
      color: #333;
      font-size: 14px;
      padding-bottom: 4px;
    }
      
      .login-header-title a:first-child {
        margin-right: 40px
      }
      
      .login-header-title  a.current{
        color: mediumpurple;
        font-weight: 700;
        border-bottom: 2px solid mediumpurple;
      }
        
      .current{
        display: none;
      }
      .passwordlogin,.verifylogin{
        display: inline-block;
      }
      input{
        width: 100%;
        height: 100%;
        padding-left :8px;
        box-sizing: border-box;
        border: 1px solid #ddd;
        border-radius: 4px;
        outline :0;
        font :400 14px Arial;
      }
        
        input:focus{
        border: 1px solid mediumpurple;
        } 
          
        
        .login-message{ 
          position :relative;
        margin-top: 16px;
        height: 48px;
        font-size :14px;
        background: #fff;
}
        
        .get-verification{
            position: absolute;
          top: 50%;
          right :10px;
          transform: translateY(-50%);
          border: 0;
          color: #ccc;
          font-size :14px;
          background: transparent;
        }
          
          .get-verification .phone_right{
              color: purple;
          }
            
      .login-verification{
          position: relative;
        margin-top: 16px;
        height: 48px;
        font-size: 14px;
        background: #fff;
      }
        
        .switch-show{
            position: absolute;
          right: 10px;
          top: 12px;
        }
          
          .switch-show img{
            display: none;
          }
            
          img.on{
          display: block;
          }
            
      .login-hint{
      margin-top: 12px;
        color: #999;
        font-size :12px;
        line-height :20px;
      }
        
          .login-hint a{
              color: mediumpurple;
          }
          
    .login-submit{
            display: block;
      width :100%;
      height: 42px;
      margin-top: 30px;
      border-radius :4px;
      background: mediumpurple;
      color :#fff;
      text-align: center;
      font-size: 16px;
      line-height: 42px;
      border: 0;
    }
  
  .login-back{
      display: block;
    width :100%;
    height :42px;
    margin-top: 15px;
    border-radius :4px;
    background: transparent;
    border: 1px solid mediumpurple;
    color: mediumpurple;
    text-align: center;
    font-size :16px;
    line-height: 42px;

  }

.jd_foot a{
   display: block;
    text-decoration: none;
    font-size: 13px;
    color: #999;
    margin-top: 100px;
    padding: 15px;
    margin-bottom: -20px;
}

.jd_foot .kefu {
  list-style: none;
  display: flex;
  margin-left: -35px;
  margin-bottom: 20px;
  justify-content: center;
}
.row{
  width: 100%;
}

.jd_msg a{
  margin-top: -15px;
  margin-left: 480px;
  
}
 </style>